<template>
  <el-dialog
    v-el-drag-dialog
    title="卸车详情"
    :visible.sync="visible"
    width="1024px"
  >
    <div class="item">
      <el-descriptions size="medium">
        <el-descriptions-item label="单号">{{ temp.transLoadCode }}</el-descriptions-item>
        <el-descriptions-item label="调入仓库">{{ temp.inStoreName }}</el-descriptions-item>
        <el-descriptions-item label="调出仓库">{{ temp.fromStoreName }}</el-descriptions-item>
        <el-descriptions-item label="车辆">{{ temp.carNumber }}</el-descriptions-item>
        <el-descriptions-item label="司机">{{ temp.driverName }}</el-descriptions-item>
        <el-descriptions-item label="押运员">{{ temp.escort }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ temp.remark }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      border
      stripe
      show-summary
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      highlight-current-row
      :immediate-fetch="false"
      :summary-method="getSummaries"
      @fetch="fetchData"
    />
  </el-dialog>
</template>

<script>
  import { queryMap, queryLoadingVehicleDetail } from '@/api'
  import { parseTime } from '@/filters'
  import moment from 'dayjs'
  import { formatColumnMap } from '@/utils'

  export default {
    name: 'detail',
    filters: {
      parseTime
    },
    data() {
      return {
        visible: false,
        gdStatusMap: [],
        temp: {},
        tableData: {
          data: [],
          column: [
            {
              prop: 'goodsName',
              label: '商品'
            },
            {
              prop: 'gdStatus',
              label: '类型',
              render: (h, { row }) => <span>{ row.gdStatus && formatColumnMap(this.gdStatusMap, 'value', row.gdStatus, 'desc') }</span>
            },
            {
              prop: 'gdCount',
              label: '装/卸车数量',
              render: (h, { row }) => <span>{ row.loadStatus || 0 }</span>
            },
            {
              prop: 'count',
              label: '扫码数量',
              render: (h, { row }) => <span>{ row.loadStatus || 0 }</span>
            },
            {
              prop: 'goodsSN',
              label: '芯片号'
            },
            {
              prop: 'goodsSN1',
              label: '钢瓶号'
            }
          ]
        }
      }
    },
    created() {
      this.queryOptionsMap()
    },
    methods: {
      moment,
      async open(temp) {
        await this.fetchData(temp)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) this.temp = Object.assign(this.temp, temp)
        })
      },
      async fetchData(temp) {
        const res = await queryLoadingVehicleDetail({
          transLoadCode: temp.transLoadCode
        })
        this.tableData.data = res.data
      },
      async queryOptionsMap() {
        const res = await queryMap({ enumName: 'GdStatus' })
        this.gdStatusMap = res.data
      },
      // 合计方法
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (column.property === 'gdStatus') {
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          }
        })

        return sums
      }
    }
  }
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .detail {
    flex: 1;
    padding-right: 20px;
  }
  .circul {
    width: 300px;
    padding-left: 20px;
    border-left: 1px solid #dcdfe6;
  }
}
.item {
  margin-bottom: 28px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
    .content {
      margin-bottom: 28px;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
